{% block sw_media_url_form %}
<mt-modal-root
    v-if="variant === 'modal'"
    :is-open="showModal"
    @change="onModalChange"
>
    <mt-modal
        class="sw-media-url-form"
        variant="small"
        :title="$tc('global.sw-media-url-form.title')"
    >

        {% block sw_media_url_form_input %}

        <mt-text-field
            v-model="url"
            class="sw-media-url-form__url-input"
            label="URL"
            :error="invalidUrlError"
            :placeholder="$tc('global.sw-media-url-form.example')"
            name="sw-field--url"
        />

        <mt-text-field
            v-if="missingFileExtension"
            v-model="extensionFromInput"
            class="sw-media-url-form__extension-input"
            :label="$tc('global.sw-media-url-form.labelFileExtension')"
            validation="required"
            placeholder="jpg"
            :help-text="$tc('global.sw-media-url-form.missingFileExtension')"
        />
        {% endblock %}

        {% block sw_media_url_form_footer %}
        <template #footer>
            {% block sw_media_url_form_cancel_button %}
            <mt-button
                size="small"
                variant="secondary"
                @click="onModalChange(false)"
            >
                {{ $tc('global.default.cancel') }}
            </mt-button>
            {% endblock %}

            {% block sw_media_url_form_submit_button %}
            <mt-button
                class="sw-media-url-form__submit-button"
                variant="primary"
                size="small"
                :disabled="!isValid"
                @click.prevent="emitUrl"
            >

                {{ $tc('global.sw-media-url-form.upload') }}
            </mt-button>
            {% endblock %}
        </template>
        {% endblock %}
    </mt-modal>

</mt-modal-root>

<div v-else-if="variant === 'inline'">
    {% block sw_media_url_form_input_inline %}

    <mt-text-field
        v-model="url"
        class="sw-media-url-form__url-input"
        label="URL"
        :error="invalidUrlError"
        :placeholder="$tc('global.sw-media-url-form.example')"
        name="sw-field--url"
    />

    <mt-text-field
        v-if="missingFileExtension"
        v-model="extensionFromInput"
        class="sw-media-url-form__extension-input"
        :label="$tc('global.sw-media-url-form.labelFileExtension')"
        validation="required"
        placeholder="jpg"
        :help-text="$tc('global.sw-media-url-form.missingFileExtension')"
    />
    {% endblock %}

    <mt-button
        class="sw-media-url-form__submit-button"
        :disabled="!isValid"
        size="small"
        variant="primary"
        @click="emitUrl"
    >
        {{ $tc('global.sw-media-url-form.upload') }}
    </mt-button>
</div>
{% endblock %}
